<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 200;

  const ctx = cvs.getContext("2d");
  // 矩形路径（无描边，无填充）
  ctx.rect(0, 50, 80, 80);
  ctx.strokeStyle = "red";
  ctx.fill();
  ctx.stroke();

  // 填充矩形
  ctx.fillStyle = "red";
  ctx.fillRect(100, 50, 80, 80);
  
  // 描边矩形
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.strokeRect(200, 50, 80, 80);

  // 擦除矩形（橡皮擦）
  // ctx.clearRect(40, 80, 200, 20);
  
  // 擦除整个画布
  ctx.clearRect(0, 0, cvs.width, cvs.height);







</script>
</html>